<script>
import * as echarts from 'echarts'

let energyConsumptionDescriptionEcharts = null
export default {
  name: 'EnergyAnalysis',
  props: {
    queryForm: {
      required: true,
      default: {}
    },
    projectList: {
      required: false,
      default: []
    }
  },
  data() {
    return {
      startTime: null,
      endTime: null,
      dataList: [],
      companyDataList: [],
      sceneInfoDataList: [],
      solidifyDateList: []
    }
  },
  computed: {
    getProjectNames() {
      return this.projectList.filter(project => this.queryForm.sceneProjectId == null || project.value === this.queryForm.sceneProjectId)
        .map(project => project.label).join('，')
    },
    getMaxDataByValue() {
      if (this.dataList.length > 0) {
        return this.dataList.slice().sort((a, b) => b.value - a.value)[0]
      }
      return {}
    },
    getMinDataByValue() {
      if (this.dataList.length > 0) {
        return this.dataList.slice().sort((a, b) => a.value - b.value)[0]
      }
      return {}
    },
    getMaxCompanyDataByValue() {
      if (this.companyDataList.length > 0) {
        return this.companyDataList.slice().sort((a, b) => b.value - a.value)[0]
      }
      return {}
    },
    getMinCompanyDataByValue() {
      if (this.companyDataList.length > 0) {
        return this.companyDataList.slice().sort((a, b) => a.value - b.value)[0]
      }
      return {}
    }
  },
  watch: {
    queryForm: {
      async handler(val) {

        if (val.sceneProjectId != null) {
          const param = {
            statisticsMode: val.statisticsMode,
            sceneProjectId: val.sceneProjectId,
            startDate: val.startTime,
            endDate: val.endTime
          }
          console.log('------------>', param)
          if (val.roomInfo != null && val.roomInfo.length > 0) {
            param.sceneEdificeId = val.roomInfo[0]
            if (val.roomInfo.length > 1) {
              param.sceneFloorId = val.roomInfo[1]
            }
            if (val.roomInfo.length > 2) {
              param.sceneRoomId = val.roomInfo[2]
            }
          }
          const res = await this.$api.userEnergyOptimizationSuggestions.energyConsumptionDescription(param)
          this.startTime = res.data.startDate
          this.endTime = res.data.endDate
          this.dataList = res.data.dataList
          this.solidifyDateList = res.data.solidifyDateList
          this.sceneInfoDataList = res.data.sceneInfoDataList
          this.companyDataList = res.data.companyDataList
          this.initEcharts()
          this.$nextTick(() => {
            this.$forceUpdate()
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getValueMaxByIndex(index) {
      if (this.solidifyDateList.length > 0) {
        const valueList = this.solidifyDateList.map(item => item.values[index])
        const findIndex = valueList.findIndex((value, index, arr) => {
          return value === Math.max.apply(Math, arr)
        })
        return this.solidifyDateList[findIndex]
      }
      return {}
    },
    getValueMinByIndex(index) {
      if (this.solidifyDateList.length > 0) {
        const valueList = this.solidifyDateList.map(item => item.values[index])
        const findIndex = valueList.findIndex((value, index, arr) => {
          return value === Math.min.apply(Math, arr)
        })
        return this.solidifyDateList[findIndex]
      }
      return {}
    },
    getSceneInfoDataValueMaxByIndex(index) {
      if (this.sceneInfoDataList.length > 0) {
        const valueList = this.sceneInfoDataList.map(item => item.values[index])
        const findIndex = valueList.findIndex((value, index, arr) => {
          return value === Math.max.apply(Math, arr)
        })
        return this.sceneInfoDataList[findIndex]
      }
      return {}
    },
    getSceneInfoDataValueMinByIndex(index) {
      if (this.sceneInfoDataList.length > 0) {
        const valueList = this.sceneInfoDataList.map(item => item.values[index])
        const findIndex = valueList.findIndex((value, index, arr) => {
          return value === Math.min.apply(Math, arr)
        })
        return this.sceneInfoDataList[findIndex]
      }
      return {}
    },
    getProjectName(projectId) {
      return this.projectList.find(project => project.value === projectId)?.label
    },
    initEcharts() {
      this.disposeEcharts()
      this.$nextTick(() => {
        energyConsumptionDescriptionEcharts = echarts.init(document.getElementById('energyConsumptionDescriptionEcharts'))
        energyConsumptionDescriptionEcharts.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '能耗说明',
              type: 'pie',
              radius: '50%',
              label: {
                formatter: params => {
                  this.$set(this.dataList[params.dataIndex], 'percent', params.percent + '%')
                  return params.name + ': (' + params.percent + '%)'
                }
              },
              data: this.dataList,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      })
    },
    disposeEcharts() {
      if (energyConsumptionDescriptionEcharts != null) {
        energyConsumptionDescriptionEcharts.dispose()
        energyConsumptionDescriptionEcharts = null
      }
    }
  },
  destroyed() {
    this.disposeEcharts()
  }
}
</script>

<template>
  <div>
    <h2>02、用能分析</h2>
    <div class="category-box">
      <h3>2.1、 能耗说明</h3>
      <div class="content">
        <el-row>
          <el-col :span="16">
            <div id="energyConsumptionDescriptionEcharts" style="width: 80%;height: 320px"></div>
          </el-col>
          <el-col :span="8">清晰地展示了场景在特定时间段内不同类型的能耗占比。{{ getProjectNames }}在{{ startTime
            }}-{{ endTime }}，
            能耗中{{ dataList.map(item => item.name).join('、')
            }}的占比分别为{{ dataList.map(item => item.percent).join('、') }}。
          </el-col>
        </el-row>
        <table>
          <thead>
          <tr>
            <th>能耗类型</th>
            <th>能耗量(kgce)</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in dataList" :key="item.name">
            <td>{{ item.name }}</td>
            <td>{{ item.value }}</td>
          </tr>
          <tr>
            <td>合计综合能耗量</td>
            <td>{{ dataList.map(item => item.value).reduce((a, b) => a + b, 0) }}</td>
          </tr>
          </tbody>
        </table>
        <div class="desc">
          <p>
            展示不同能源在特定时间段内的能耗情况。{{ getProjectNames }}在 {{ startTime }}- {{ endTime }}中,
            能耗总量为{{ dataList.map(item => item.value).reduce((a, b) => a + b, 0) }} kgce。
            能耗中{{ dataList.map(item => item.name).join('、')
            }}的能耗量分别为{{ dataList.map(item => item.value + ' kgce').join('、') }} ；
            其中{{ getMaxDataByValue.name }}能耗量最高，为{{ getMaxDataByValue.value }} kgce；
            {{ getMinDataByValue.name }}能耗量最低，为{{ getMinDataByValue.value }} kgCO2。</p>
        </div>
        <div style="margin: 0 5%">
          <div>
            <h4>2.1.1 时间能耗</h4>
            <table>
              <thead>
              <tr>
                <th>数据时间</th>
                <th v-for="item in dataList">{{ item.name }}(kgce)</th>
                <th>总量(kgce)</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in solidifyDateList" :key="item.solidifyDate">
                <td>{{ item.solidifyDate }}</td>
                <td v-for="valueItem in item.values">{{ valueItem }}</td>
                <td>{{ item.total }}</td>
              </tr>
              </tbody>
            </table>
            <div class="desc">
              <p>
                展示和分析在时间段内不同能源类型的能耗量。{{ getProjectNames }}在{{ startTime }}-{{ endTime }}中，
                <span v-for="(item,index) in dataList">
                {{ item.name }}能耗总量为{{ solidifyDateList.map(item => item.values[index]).reduce((a, b) => a + b, 0)
                  }}kgce，其中{{ getValueMaxByIndex(index).solidifyDate }}的{{ item.name
                  }}能耗量最高，为 {{ getValueMaxByIndex(index).values == null ? null : getValueMaxByIndex(index).values[index]
                  }}kgce;
                  {{ getValueMinByIndex(index).solidifyDate }} {{ item.name
                  }}能耗量最低，为 {{ getValueMinByIndex(index).values == null ? null : getValueMinByIndex(index).values[index]
                  }} kgce。
                </span>
              </p>
            </div>
          </div>
          <div>
            <h4>2.1.2 项目能耗</h4>
            <table>
              <thead>
              <tr>
                <th>所属项目</th>
                <th>所属场景</th>
                <th v-for="item in dataList">{{ item.name }}(kgce)</th>
                <th>总量(kgce)</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in sceneInfoDataList" :key="`${item.sceneProjectId}_${index}`">
                <td>{{ getProjectName(item.sceneProjectId) }}</td>
                <td>{{ item.sceneInfoName }}</td>
                <td v-for="valueItem in item.values">{{ valueItem }}</td>
                <td>{{ item.total }}</td>
              </tr>
              </tbody>
            </table>
            <div class="desc">
              <p>
                展示和分析在不同场景下不同能源类型的能耗量。{{ getProjectNames }}在{{ startTime }}- {{ endTime }}中，
                <span v-for="(item,index) in dataList">
                {{ item.name }}能耗总量为{{ sceneInfoDataList.map(item => item.values[index]).reduce((a, b) => a + b, 0)
                  }}kgce，
                  其中{{ getProjectName(getSceneInfoDataValueMaxByIndex(index).sceneProjectId)
                  }}{{ getSceneInfoDataValueMaxByIndex(index).sceneInfoName }}{{ item.name
                  }}能耗量最高，为{{ getSceneInfoDataValueMaxByIndex(index).values == null ? null : getSceneInfoDataValueMaxByIndex(index).values[index]
                  }} kgce；
                  {{ getProjectName(getSceneInfoDataValueMinByIndex(index).sceneProjectId)
                  }}{{ getSceneInfoDataValueMinByIndex(index).sceneInfoName
                  }}能耗量最低，为{{ getSceneInfoDataValueMinByIndex(index).values == null ? null : getSceneInfoDataValueMinByIndex(index).values[index]
                  }}kgce。
                </span>
              </p>
            </div>
          </div>
          <div>
            <h4>2.1.3 公司能耗</h4>
            <table>
              <thead>
              <tr>
                <th>序号</th>
                <th>公司名称</th>
                <th>能耗量(kgce)</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in companyDataList" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{ item.companyName }}</td>
                <td>{{ item.value }}</td>
              </tr>
              </tbody>
            </table>
            <div class="desc">
              <p>
                在{{ startTime }}-{{ endTime }}中，
                公司的总能耗量为{{ companyDataList.map(item => item.value).reduce((a, b) => a + b, 0) }}
                kgce。{{ getMaxCompanyDataByValue.companyName }}的能耗量最高，为{{ getMaxCompanyDataByValue.value }} kgce；
                {{ getMinCompanyDataByValue.companyName }}的能耗量最低，为{{ getMinCompanyDataByValue.value }}kgce。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  只有选择了日和公司才显示该数据 ,数据来源：AI算法团队提供 -->
    <div class="elevator-box" v-show="queryForm.statisticsMode === 'day' && queryForm.sceneCompanyId != null">
      <h3>2.2、 峰谷情况</h3>
      <div class="content">
        <table style="width: 80%; margin: 0 5%">
          <thead>
          <tr>
            <th>数据时间</th>
            <th>最大峰谷差(kwh)</th>
            <th>负荷最重时间段</th>
            <th>负荷最轻时间段</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>电梯1</td>
            <td>300</td>
            <td>300</td>
            <td>30</td>
          </tr>
          </tbody>
        </table>
        <div class="desc">
          <p>
            展示电力需求随时间的变化情况，特别是需求高峰期和低谷期的差异。项目1在2022年01月02日-2022年01月06日中，2022-01月02日的最大峰谷差最大，为
            60kwh；2022-01月02日的最大峰谷差最小，为 10kwh；
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.category-box, .elevator-box, .charging-box {
  padding: 0 5%;

  table {
    border-collapse: collapse;
    width: 75%;
    margin: 0 10%;
    font-size: 16px;
    font-weight: 500;

    th {
      border: 1px solid rgba(0, 0, 0, 0.6);
      padding: 6px 10px;
      background-color: rgb(2, 149, 144);
      text-align: center;
    }

    td {
      border: 1px solid #000000;
      padding: 6px 10px;
      text-align: center;
    }
  }

  .content {
    padding: 0 5%;

    p {
      text-indent: 2em;
      line-height: 28px;
    }
  }
}
</style>
